<template>
    <div v-loading="loading">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-suffix="：">
            <el-form-item label="参数组名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入参数组名称" />
            </el-form-item>
            <el-form-item label="绑定分类" prop="business_classify_id">
                <div style="line-height: 1;">
                    <treeselect
                        v-model="form.business_classify_id"
                        :disabled="view"
                        :options="categoryOptions"
                        :default-expand-level="1"
                        placeholder="请选择"
                    />
                </div>
            </el-form-item>
            <el-form-item label="参数" prop="weigh">
                <div class="mb-20">
                    <div v-for="(param, index) in form.childs" :key="index" class="mb-20">
                        <el-form-item :prop="'childs.' + index + '.name'" :rules="{
                            required: true, message: '参数名不能为空', trigger: 'blur'
                        }"
                        >
                            <el-input v-model="param.name" placeholder="请输入内容">
                                <template slot="prepend">参数名称</template>
                                <template slot="append">
                                    <el-button v-if="index != 0" icon="el-icon-delete" @click="removeParam(param)" />
                                </template>
                            </el-input>
                        </el-form-item>
                    </div>
                </div>
                <el-button icon="el-icon-plus" @click="addParam">增加参数</el-button>
            </el-form-item>
            <el-form-item label="权重" prop="weigh">
                <el-input-number v-model="form.weigh" :step="1" :min="0" step-strictly label="权重" />
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    props: {
        id: {
            type: [Number, String],
            default: ''
        },
        view: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            loading: false,
            categoryOptions: [],
            form: {
                id: this.id,
                name: '',
                business_classify_id: null,
                weigh: 0,
                childs: [],
                status: 1
            },
            rules: {
                name: [{ required: true, message: '请完善信息', trigger: 'blur' }]
            }
        }
    },
    mounted() {
        if (this.form.id != '') {
            this.getInfo()
        } else {
            this.addParam()
        }
        this.getCategory()
    },
    methods: {
        getCategory() {
            this.$api.post('product/search/business-classify-filter').then(res => {
                this.categoryOptions = res.data.data
            })
        },
        getInfo() {
            this.loading = true
            this.$api.post('product/params/detail', { id: this.form.id }).then(res => {
                this.loading = false
                const data = res.data.data
                this.form = Object.assign(this.form, data)
            })
        },
        submit(callback) {
            if (this.form.id == '') {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        this.$api.post('product/params/create', this.form).then(() => {
                            this.$message.success({
                                message: '新增成功',
                                center: true
                            })
                            callback && callback()
                        })
                    }
                })
            } else {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        this.$api.post('product/params/update', this.form).then(() => {
                            this.$message.success({
                                message: '编辑成功',
                                center: true
                            })
                            callback && callback()
                        })
                    }
                })
            }
        },
        removeParam(param) {
            var index = this.form.childs.indexOf(param)
            if (index !== -1) {
                this.form.childs.splice(index, 1)
            }
        },
        addParam() {
            this.form.childs.push({
                name: ''
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    // scss
</style>
